<template>
  <div class="container" >
    <!-- <img src="http://file.rzkeji.com/web/loveciy/img/planBanner2.jpg" class="titleImg"/> -->
    <swiper class="titleImg" autoplay interval="3000" indicator-dots>
        <swiper-item v-for="(value,index) in bannerImg">
            <img :src="value.img_url" class="titleImg" @click="goDetails(value.link_url)" mode="aspectFit"/>
        </swiper-item>
      </swiper>
    <div class="notice">
      <img src="http://file.rzkeji.com/web/loveciy/img/join/tip.png"/>
      <span @click="goDetails(notice.link_url)"><span>公告:</span><span>{{notice.title}}</span></span>
    </div>
    <div class="nav">
      <ul>
        <li @click="go('daily')" :class="{'select':selectClass}">
           <img :src="selectClass? 'http://file.rzkeji.com/web/loveciy/img/join/task.png' : 'http://file.rzkeji.com/web/loveciy/img/join/task1.png'"/>
           <span>日常任务</span>
        </li>
        <li @click="go('order')" :class="{'select':!selectClass}">
           <img :src="!selectClass? 'http://file.rzkeji.com/web/loveciy/img/join/order.png' : 'http://file.rzkeji.com/web/loveciy/img/join/order1.png'"/>
           <span>订单任务</span>
        </li>
      </ul>
    </div>
    <task v-if="selectClass"></task>
    <order v-else></order>

    <div class="ucenter">
          <navigator url="../personal/main">
            <img src="http://file.loveciy.net/web/cut/icon-ucenter.png" class="customer"/>
          </navigator>
    </div>
    <div class="customerWrap">
          <navigator url="../customer/main">
            <img src="http://file.rzkeji.com/web/loveciy/img/customer.png" class="customer"/>
          </navigator>
    </div>
    <footer1></footer1>
  </div>
</template>

<script>
import order from '@/components/orderTask'
import task from '@/components/joinTask'
import footer1 from '@/components/footer'
export default {
  data () {
    return {
     selectClass:true,
     bannerImg:[]
    }
  },

  components: {
      task,
      order,
      footer1
  },
  computed:{
    notice(){
      return this.$store.state.modulesOrder.notice;
    }
  },
  methods: {
    goDetails(url){
      this.$currency.goDetails(url)
    },
    go(value)
    {
     var _this=this;
      _this.selectClass= !_this.selectClass
    },
    getBannerList(){
      var _this = this
      _this.$request.getData("https://zlz.loveciy.net/api/other/get-task-banner-list").then(res =>{
      var res=res.data.data;
      _this.bannerImg = res;
      })
    }
  },
  onLoad(){
    this.getBannerList()
  }
}
</script>

<style scoped>
.container{width: 100%;background: #f2f2f2;min-height: 100%;}
.titleImg{width: 100%;height: 166px;}
.notice{width: 100%;height: 35px;background: #fff}
.notice img{width: 25px;height: 25px;margin-top: 5px;vertical-align: middle;margin-left: 20px;}
.notice span{width: 300px;height: 25px;vertical-align: middle;line-height: 25px;margin-left: 4px;font-size: 16px;}
.notice span span:nth-of-type(1){color: red}

.nav{width: 100%;height: 40px;background: #fff;margin-top: 10px;}
.nav ul{width: 100%;height: 40px;display: flex;justify-content: row;}
.nav ul li{width: 50%;height: 40px;text-align: center;line-height: 40px;font-size: 16px;}
.nav ul li:nth-of-type(1){border-right: 0.2px solid #cccccc}
.nav ul li.select{color: red}
.nav ul li img{width: 30px;height: 30px;vertical-align: middle;}
.nav ul li span{margin-left:5px;vertical-align: middle;}
.customerWrap{width: 50px;height: 50px;position: fixed;right: 20px;bottom: 80px;background: rgba(0,0,0,0.5);border-radius: 50px;}
.customer{width:40px;height:40px;margin-left:5px;margin-top:5px;}
.ucenter{width: 50px;height: 50px;position: fixed;right: 20px;bottom: 135px;background: rgba(0,0,0,0.5);border-radius: 50px;}
</style>
